@if (pageContent$ | async; as page) {
  <div class="block">
    @if ((user$ | async) && page.nid) {
      <div class="page-toolbar fixed right-5 top-20 md:right-10 md:top-40 z-[1000]">
        <app-btn
          (click)="onEdit(page.nid)"
          [content]="{
            mode: 'mini-fab',
            color: 'primary',
            icon: { svg: 'pencil' },
          }"
        />
      </div>
    }
    <mat-drawer-container (backdropClick)="onBackdrop()">
      <mat-drawer-content>
        <div *ngTemplateOutlet="block; context: { content: page.body }"></div>
      </mat-drawer-content>
      <mat-drawer
        (openedChange)="onDrawer()"
        class="drawer-right"
        [mode]="'over'"
        [opened]="opened"
        position="end"
      >
        @if (drawerLoading) {
          <div class="drawer-loading">
            <mat-spinner diameter="50" color="accent" />
          </div>
        }
        @if (!drawerLoading && opened) {
          <div
            *ngTemplateOutlet="
              block;
              context: {
                content: drawerContent?.body,
              }
            "
          ></div>
        }
      </mat-drawer>
    </mat-drawer-container>
  </div>
}

<ng-template let-content="content" #block>
  @for (item of content; track i; let i = $index) {
    <app-dynamic-component [inputs]="item" [index]="i" />
  }
</ng-template>
